<template>
  <view class="level-table">
    <view class="level-row master">
      <view>等级</view>
      <view>所需成长值</view>
    </view>
    <view v-for="(line, index) in levels" class="level-row">
      <view>{{ line.label }}</view>
      <view>{{ line.content }}</view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from "vue"

  const levels = ref([
    { label: '铜牌玩家', content: '0 - 1000' },
    { label: '银牌玩家', content: '1001 - 2000' },
    { label: '金牌玩家', content: '2001 - 3000' },
    { label: '王牌玩家', content: '3001 及以上' },
  ])
</script>

<style lang="less" scoped>
  .level-table {
    border-top: 1px solid #707070;
  }
  .level-row {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 12px 0;
    font-size: 12px;
    color: #242424;
    line-height: 1;
    border-bottom: 1px solid #7C9ED4;
    &.master {
      font-weight: 500;
      border-bottom: 1px solid #707070;
    }
    view {
      width: 50%;
      text-align: center;
    }
  }
</style>
